<!-- directive:title 搜索框 -->
<!-- directive:breadcrumb 搜索框 -->
<div class="panel-body">
    <div class="row">
        <div class="col-sm-6">
            <div class="search d1"> <form> <input type="text" placeholder="搜索从这里开始..."> <button type="submit"></button> </form> </div>
            <div class="search d4"> <form> <input type="text" placeholder="搜索从这里开始..."> <button type="submit"></button> </form> </div>
            <div class="search d5"> <form> <input type="text" placeholder="搜索从这里开始..."> <button type="submit"></button> </form> </div>
            <div class="search d6"> <form> <input type="text" placeholder="搜索从这里开始..."> <button type="submit"></button> </form> </div>
            <div class="search d7"> <form> <input type="text" placeholder="搜索从这里开始..."> <button type="submit"></button> </form> </div>
        </div>
        <div class="col-sm-6">
            <template ui-bs>
                <div class="search d1"> <form>
                    <input type="text" placeholder="搜索从这里开始...">
                    <button type="submit"></button>
                </form> </div>
                <div class="search d4"> <form>
                    <input type="text" placeholder="搜索从这里开始...">
                    <button type="submit"></button> </form>
                </div>
                <div class="search d5"> <form>
                    <input type="text" placeholder="搜索从这里开始...">
                    <button type="submit"></button> </form>
                </div>
                <div class="search d6"> <form>
                    <input type="text" placeholder="搜索从这里开始...">
                    <button type="submit"></button> </form>
                </div>
                <div class="search d7"><form>
                    <input type="text" placeholder="搜索从这里开始...">
                    <button type="submit"></button>
                </form></div>
            </template>
        </div>
        <div class="col-sm-12">
            <style type="text/css" ui-bs>
                .search{position: relative; }
                .search form { width: 300px; }
                .search.d1 input { width: 100%; height: 34px; padding-left: 10px; border: 2px solid #7BA7AB; border-radius: 5px; outline: none; background: #F9F0DA; color: #9E9C9C; }
                .search.d1 button { position: absolute; top: 0; right: 0px; width: 42px; height: 34px; border: none; background: #7BA7AB; border-radius: 0 5px 5px 0; cursor: pointer; }
                .search.d1 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }
                .search.d4 form { background: #F9F0DA; border-bottom: 4px solid #be290e; }
                .search.d4 input, .search.d4 button { border: none; outline: none; background: transparent; }
                .search.d4 input { width: 100%; height: 34px; padding-left: 15px; }
                .search.d4 button { height: 34px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; }
                .search.d4 button:before { content: "\f178"; font-family: FontAwesome; font-size: 20px; color: #be290e; }
                .search.d5 input, .search.d5 button { outline: none; background: transparent; }
                .search.d5 input { width: 100%; height: 34px; padding-left: 15px; border: 3px solid #F9F0DA; }
                .search.d5 button { border: none; height: 34px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; }
                .search.d5 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }
                .search.d5 input:focus { border-color: #311c24 }
                .search.d6 form { height: 34px; }
                .search.d6 input { height: 100%; width: 0; padding: 0 42px 0 15px; color:#fff; border: none; border-bottom: 2px solid transparent; outline: none; background: transparent; transition: .4s cubic-bezier(0, 0.8, 0, 1); position: absolute; top: 0; right: 0; z-index: 2; }
                .search.d6 input:focus { width: 300px; z-index: 1; border-bottom: 2px solid #F9F0DA; }
                .search.d6 button { background: #683B4D; border: none; height: 34px; width: 42px; position: absolute; top: 0; right: 0; cursor: pointer; }
                .search.d6 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA; }
                .search.d7:after {content:""; clear:both; display:table}
                .search.d7 form { width: auto; float: right; margin-right: 30px; }
                .search.d7 input { width: 200px; height: 34px; padding-left: 15px; border-radius: 42px; border: 2px solid #324b4e; background: #F9F0DA; outline: none; position: relative; transition: .3s linear; }
                .search.d7 input:focus { width: 300px; }
                .search.d7 button { width: 42px; height: 34px; background: none; border: none; position: absolute; top: -2px; right: 0; }
                .search.d7 button:before{ content: "\f002"; font-family: FontAwesome; color: #324b4e; }
                .search{padding:20px 0}
                .search form { position: relative; width: 300px; margin: 0 auto; }
                .search.d1 {background: #A3D0C3;}
                .search.d4 {background: #F15B42;}
                .search.d5 {background: #683B4D;}
                .search.d6 {background: #B46381;}
                .search.d7 {background: #7BA7AB;}
            </style>
        </div>
    </div>
</div>

